<template>
  <div>
    <div style="padding: 20px">
      <el-card>
        <div class="body">
          <!-- 头部搜索区 -->
          <el-form ref="searchRef" :model="searchData">
            <el-row type="flex" flex-wrap="wrap">
              <el-col
                :span="24"
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 20px;
                  margin-left: -5px;
                "
              >
                <span style="color: pink; font-size: 12px"
                  >说明：目前支持学科和关键字条件筛选</span
                ><el-button type="success">
                  <i class="el-icon-edit" @click="add">新增试题</i></el-button
                ></el-col
              >
              <el-col :span="6"
                ><el-form-item prop="subjectID" label-width="80px">
                  <span slot="label" style="font-size: 16px">学科</span>
                  <el-select
                    v-model="searchData.subjectID"
                    placeholder="请选择"
                    @change="changeSubjectID"
                  >
                    <el-option
                      v-for="item in data.subjectID"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option
                  ></el-select> </el-form-item
              ></el-col>
              <el-col :span="6">
                <el-form-item prop="catalogID" label-width="80px">
                  <span slot="label" style="font-size: 16px">二级目录</span>
                  <el-select
                    placeholder="请选择"
                    v-model="searchData.catalogID"
                  >
                    <el-option
                      v-for="item in data.catalogID"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="tags" label-width="80px">
                  <span slot="label" style="font-size: 16px">标签</span>
                  <el-select v-model="searchData.tags" placeholder="请选择">
                    <el-option
                      v-for="item in data.tags"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="keyword" label-width="80px">
                  <span slot="label" style="font-size: 16px">关键字</span>
                  <el-input
                    v-model="searchData.keyword"
                    placeholder="根据题干搜索"
                    style="width: 235px"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item prop="state" label-width="80px">
                  <span slot="label" style="font-size: 16px">试题类型</span>
                  <el-select
                    v-model="searchData.questionType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in data.questionType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item prop="state" label-width="80">
                  <span slot="label" style="font-size: 16px; margin-left: 35px"
                    >难度</span
                  >
                  <el-select
                    v-model="searchData.difficulty"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in data.difficulty"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item prop="state" label-width="80px">
                  <span slot="label" style="font-size: 16px">方向</span>
                  <el-select
                    v-model="searchData.direction"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in data.direction"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item prop="creatorID" label-width="80px">
                  <span slot="label" style="font-size: 16px">录入人</span>
                  <el-select
                    v-model="searchData.creatorID"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in data.creatorID"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item prop="remarks" label-width="80px">
                  <span slot="label" style="font-size: 16px">题目备注</span>
                  <el-input
                    style="width: 235px"
                    v-model="searchData.remarks"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item prop="shortName" label-width="80px">
                  <span slot="label" style="font-size: 16px">企业简称</span>
                  <el-input
                    style="width: 235px"
                    v-model="searchData.shortName"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item prop="city" label-width="80px">
                  <span slot="label" style="font-size: 16px">城市</span>
                  <el-select
                    v-model="searchData.province"
                    placeholder="请选择"
                    style="width: 48%; margin-right: 2%"
                    @change="choseProvince"
                  >
                    <el-option
                      v-for="item in provinces"
                      :key="item.id"
                      :label="item.label"
                      :value="item.label"
                    >
                    </el-option> </el-select
                  ><el-select
                    v-model="searchData.city"
                    placeholder="请选择"
                    style="width: 48%"
                    @change="choseCity"
                  >
                    <el-option
                      v-for="item in cities"
                      :key="item.id"
                      :label="item.label"
                      :value="item.label"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>

              <el-col :span="6" style="text-align: right; margin-left: -5px"
                ><el-button @click="resetField">清除</el-button>
                <el-button type="primary" class="search" @click="search"
                  >搜索</el-button
                ></el-col
              >
            </el-row>
          </el-form>

          <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待审核" name="second"></el-tab-pane>
            <el-tab-pane label="已审核" name="third"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
          </el-tabs>
          <!-- 共n条记录 -->
          <elalert :counts="counts"></elalert>
          <!-- 结果区 -->
          <el-table :data="list" style="width: 100%">
            <el-table-column
              align="left"
              prop="number"
              label="试题编号"
              width="120"
            />
            <el-table-column align="left" prop="subject" label="学科" />
            <el-table-column align="left" prop="catalog" label="目录" />
            <el-table-column align="left" prop="questionType" label="题型" />
            <el-table-column align="left" label="题干" width="280">
              <template #default="scoped">
                <span v-html="scoped.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              prop="addDate"
              label="录入时间"
              width="180"
            />
            <el-table-column align="left" prop="difficulty" label="难度" />
            <el-table-column align="left" prop="creator" label="录入人" />
            <el-table-column align="left" prop="chkState" label="审核状态" />
            <el-table-column align="left" prop="chkRemarks" label="审核意见" />
            <el-table-column align="left" prop="chkUser" label="审核人" />
            <el-table-column
              align="left"
              prop="publishState"
              label="发布状态"
            />
            <el-table-column
              align="center"
              label="操作"
              width="200"
              fixed="right"
            >
              <template #default="{ row }">
                <el-button @click="view(row)" type="text">
                  <span>预览</span></el-button
                >
                <el-button
                  type="text"
                  :disabled="row.chkState !== '待审核'"
                  @click="check(row)"
                >
                  <span>审核</span>
                </el-button>
                <el-button
                  type="text"
                  @click="edit(row)"
                  :disabled="row.publishState === '已发布'"
                >
                  <span>修改</span>
                </el-button>
                <el-button type="text" @click="choicePublish(row)">
                  <span>{{
                    row.publishState === '待发布' ||
                    row.publishState === '已下架'
                      ? '上架'
                      : '下架'
                  }}</span>
                </el-button>
                <el-button
                  type="text"
                  @click="del(row)"
                  :disabled="row.publishState === '已发布'"
                >
                  <span>删除</span></el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <elpagination
            :counts="counts"
            :data="data"
            :n="[5, 10, 20, 50]"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          ></elpagination>
        </div>
      </el-card>
    </div>
    <eldialog
      :showDialog="showDialog"
      :showVideo="showVideo"
      @close="showDialog = false"
      @clickVideo="showVideo = true"
      :row="row"
    ></eldialog>

    <el-dialog :visible.sync="showCheck" width="440px" title="题目审核">
      <el-radio
        v-model="searchData.chkState"
        label="1"
        @change="changeCheckRadio"
        >通过</el-radio
      >
      <el-radio
        v-model="searchData.chkState"
        label="2"
        @change="changeCheckRadio"
        >拒绝</el-radio
      >
      <el-input
        type="textarea"
        style="margin: 30px 0 50px"
        v-model="searchData.chkRemarks"
      ></el-input>
      <div align="right">
        <el-button @click="showCheck = false">取消</el-button>
        <el-button type="primary" @click="submitCheck">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elalert from '@/components/elalert/index.vue'
import elpagination from '@/components/elpagination/index.vue'
import eldialog from '@/components/eldialog/index'
import { simple } from '@/api/hmmm/subjects'
import { simple as userSimple } from '@/api/base/users'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import {
  remove,
  detail,
  choice,
  choicePublish,
  choiceCheck
} from '@/api/hmmm/questions'
import {
  chkType,
  publishType,
  questionType,
  difficulty,
  direction
} from '@/api/hmmm/constants'
import moment from 'moment'
import ChineseDistricts from '@/utils/area'
export default {
  data() {
    return {
      ChineseDistricts: ChineseDistricts,
      activeName2: 'first',
      showCheck: false,
      data: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        province: null,
        city: null,
        shortName: null,
        state: null,
        catalogID: null,
        tags: null,
        questionType: questionType,
        difficulty: difficulty,
        direction: direction,
        creatorID: []
      },
      chkType: chkType,
      publishType: publishType,
      provinces: [],
      cities: [],
      shi1: [],
      list: [],
      currentPage: 1,
      counts: 1,
      showDialog: false,
      showVideo: false,
      row: {},
      searchData: {
        id: null,
        page: 1,
        pagesize: 5,
        city: '',
        province: '',
        keyword: '',
        remarks: '',
        chkState: null,
        chkRemarks: null,
        shortName: '',
        subjectID: null,
        catalogID: null,
        tags: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null
      }
    }
  },
  components: { elalert, elpagination, eldialog },
  async created() {
    this.getObjects()
    this.getCityData()
    const { data } = await userSimple()
    this.data.creatorID = data
    this.getChoiceList()
  },
  methods: {
    // 获取学科数据
    async getObjects() {
      const { data } = await simple()
      this.data.subjectID = data
    },
    //获取精选列表
    async getChoiceList() {
      const { data } = await choice(this.searchData)
      data.items.forEach(item => {
        item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss')
        item.difficulty =
          item.difficulty === '1'
            ? '简单'
            : item.difficulty === '2'
            ? '一般'
            : '困难'
        item.questionType = item.questionType === '1' ? '单选' : '多选'
        this.chkType.forEach(chkitem => {
          item.chkState === chkitem.value ? (item.chkState = chkitem.label) : ''
        })
        this.publishType.forEach(pblsitem => {
          item.publishState === pblsitem.value
            ? (item.publishState = pblsitem.label)
            : ''
        })
      })

      this.counts = data.counts
      this.list = data.items
      this.page = data.page
      this.pagesize = data.pagesize
    },
    // 获取全国拿城市
    getCityData() {
      this.ChineseDistricts.forEach(item => {
        // console.log(item)
        item.cityList?.forEach(item2 => {
          this.provinces.push({
            id: item2.code,
            label: item2.name,
            children: item2.areaList
          })
        })
      })
    },
    // 选省
    choseProvince(e) {
      this.cities = []
      this.provinces.forEach(item => {
        if (item.id === e) {
          // console.log(item)
          this.addFormdata.province = item.label
          this.data.province = item.label
          this.shi1 = item.children
          this.data.city = item.children[0].name
          this.addFormdata.city = item.children[0].name
          this.shi1.forEach(citem => {
            this.cities.push({
              id: citem.code,
              label: citem.name
            })
          })
        }
      })
    },
    // 选市
    choseCity(e) {
      this.cities.forEach(item => {
        // console.log(item)
        if (item.id === e) {
          this.addFormdata.city = item.label
          this.data.city = item.label
        }
      })
    },
    handleSizeChange(val) {
      this.searchData.pagesize = val
      this.activeName2 = 'first'
      this.searchData.chkState = null
      this.getChoiceList()
    },
    handleCurrentChange(val) {
      this.searchData.page = val
      this.activeName2 = 'first'
      this.searchData.chkState = null
      this.getChoiceList()
    },
    resetField() {
      this.$refs.searchRef.resetFields()
      this.searchData.questionType = null
      this.searchData.difficulty = null
      this.searchData.direction = null
      this.searchData.province = null
    },
    async search() {
      await this.getChoiceList()
      this.resetField()
    },
    async changeSubjectID(val) {
      const res = await directorysSimple({ subjectID: val })
      this.data.catalogID = res.data
      const res1 = await tagsSimple({ subjectID: val })
      this.data.tags = res1.data
    },
    async add() {
      this.resetField()
      this.$router.push('new')
    },
    async view(row) {
      this.showDialog = true
      const { data } = await detail({ id: row.id })
      this.row = { ...data, ...row }
      if (row.questionType === '单选') {
        this.row.options.forEach(item => {
          if (item.isRight === 1) {
            this.row.right = item.id
          }
        })
      } else if (row.questionType === '多选') {
        this.row.right = []
        this.row.options.forEach(item => {
          if (item.isRight === 1) {
            this.row.right.push(item.id)
          }
        })
      }
    },
    check(row) {
      this.searchData.id = row.id
      this.showCheck = true
    },
    changeCheckRadio(val) {
      // console.log(val)
      this.searchData.chkState = val
    },
    async submitCheck() {
      this.searchData.chkState = +this.searchData.chkState
      try {
        await choiceCheck(this.searchData)
        this.$message.success('审核完成！')
        this.showCheck = false
        this.getChoiceList()
      } catch (error) {
        console.log(error)
      }
    },
    async edit(row) {
      this.$store.dispatch('row/changeRow', row)
      this.$router.push(`new?id=${row.id}`)
    },
    async choicePublish(row) {
      this.$confirm(
        `确定要${
          row.publishState === '待发布' || row.publishState === '已下架'
            ? '上架'
            : '下架'
        }吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          row.publishState === '待发布' || row.publishState === '已下架'
            ? (row.publishState = 1)
            : (row.publishState = 2)
          await choicePublish(row)

          this.getChoiceList()
          this.$message.success(
            `${row.publishState === 1 ? '上架' : '下架'}成功！`
          )
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功'
          })
        })
    },
    async del(row) {
      this.$confirm('该项操作不可恢复！确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.$message.success('删除成功')
          this.getChoiceList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    handleClick() {
      switch (this.activeName2) {
        case 'first':
          this.getChoiceList()
          break
        case 'second':
          this.searchData.chkState = 0
          this.getChoiceList()
          break
        case 'third':
          this.searchData.chkState = 1
          this.getChoiceList()
          break
        case 'fourth':
          this.searchData.chkState = 2
          this.getChoiceList()
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 4px;
  overflow: hidden;
  .body {
    width: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
      Microsoft YaHei, Arial, sans-serif;
    ::v-deep .el-form {
      .el-row {
        flex-wrap: wrap;
        .el-col {
          .el-form-item {
            margin-bottom: 18px;
            .el-select {
              width: 235px;
            }
            .el-input {
              position: relative;
              display: inline-block;
              height: 32px;
              line-height: 32px;
            }
          }
        }
      }
    }
    ::v-deep .el-table {
      .el-table--fit {
        border-right: 0;
        border-bottom: 0;
      }
    }
    ::v-deep .el-table .cell {
      padding-left: 0px;
      padding-right: 9px;
    }
  }
}
</style>
